<template>
  <div>
    <el-dialog
      title="请选择您要上传的数据"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <div class="el-dialog-body">
        <span></span>
        <el-upload
          class="upload-demo"
          ref="upload"
          :action="host+'/admin/xy/upload/uploadImg'"
          :headers='headers'
          :file-list="fileList"
          list-type="picture"
          :auto-upload="false"
          :on-success="uploadSuccess"
        >
          <el-button slot="trigger" size="small" type="primary">点击选取文件</el-button>
          <el-button
            style="margin-left: 10px;"
            size="small"
            type="success"
            @click="submitUpload"
          >点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1500kb</div>
        </el-upload>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import setting from "@/settings";
export default {
  data() {
    return {
      host: setting.host,
      centerDialogVisible: false,
      fileList: []
    };
  },
  computed:{
    headers(){
      return {
         'bufan-token':localStorage.getItem('bufan-token')
      }
    }
  },
  methods: {
    test(){
       console.log(window.localStorage.getItem('bufan-token'))
    },
    uploadSuccess(response, file, fileList) {
      this.$refs.upload.clearFiles();
      this.$emit("getImageList");
      this.$message({
        message: `图片上传成功`,
        type: "success"
      });
    },
    submitUpload() {
      // this.$refs.upload.
      this.$refs.upload.submit();
    }
  },
};
</script>

<style lang="scss" scoped>
.el-dialog-body{
    min-height: 200px;
    width: 100%;
}
</style>